import { View, Text, Navigator, Image } from '@tarojs/components'
import Taro, { useShareAppMessage } from '@tarojs/taro'
import { useFoods } from 'src/hooks/useFoods'
import { Empty } from 'src/components/empty'
import { useCategory } from 'src/hooks/useCategories'
import defaultFood from 'src/assets/image/not-found.jpeg'

import './index.less'

export default function Index() {
  const cateId = Taro.getCurrentInstance().router?.params?.id
  const [category] = useCategory(cateId!)
  const [list] = useFoods(cateId)

  useShareAppMessage(() => {
    return {
      title: '菜品',
      path: `/pages/food/index?id=${cateId}`,
    }
  })

  return (
    <View className='index'>
      <View className='header'>
        <View className='header-name'>Menu</View>
        <View className='header-label'>{category?.name}</View>
      </View>
      <View className='body'>
          {
            list.length > 0 ?
              list.map(item => (
                <Navigator className='item' url={`/pages/mix-ingredient/index?id=${item.id}`} key={item.id}>
                  <Image src={item.image || defaultFood} mode='aspectFill' />
                  <View className='name'>{item.name}</View>
                </Navigator>
              )) :
              <Empty />
          }
      </View>
    </View>
  )
}
